<script setup lang="ts">
import {removeMarkdownSymbols} from "@/utils/common";

const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
})
/**
 * 订单详情
 */
const toDetail = (id: string): void => {
  // const res = uni.getStorageSync("userInfo");
  // if(res?.reviewStatus === 1) {
  //   console.log(1)
  //   uni.showToast({
  //     icon: 'none',
  //     title: "商户审核中不可查看详情"
  //   })
  //   return;
  // }
  const userInfo = uni.getStorageSync("userInfo");
  if (userInfo?.reviewStatus == "4") {
  	uni.showToast({
  	    title: "定向商户，无法接单，请联系客服",
  	    icon: "none"
  	})
  	return;
  }
  const token = uni.getStorageSync('token')
  console.log(token, userInfo, "-----")
  if (token && userInfo?.nickname) {
    uni.navigateTo({
      url: `/pages/order/index?id=${id}`,
    })
  } else {
    uni.navigateTo({
      url: `/pages/orderV2/index?id=${id}`,
    })
  }
  
  // uni.navigateTo({
  //   url: `/pages/order/index?id=${id}`,
  // })
}
</script>

<template>
  <view class="job-card" v-for="item in dataList" :key="item.id" @click="toDetail(item.id)">
    <view class="job-card__head">
      <view class="job-card__title">
        {{ item.title }}
<!--        <span class="badge badge&#45;&#45;hot">急聘</span>-->
<!--        <span class="badge">派遣</span>-->
      </view>
      <view class="job-card__salary">￥{{ item.totalPrice }}元</view>
    </view>

    <view class="job-card__meta">
      {{ removeMarkdownSymbols(item.requirementDescription) }}
    </view>

    <view class="job-card__tags">
      <span class="tag" v-show="item.categorySelectionOne">{{ item.categorySelectionOne }}</span>
      <span class="tag" v-show="item.categorySelectionTwo">{{ item.categorySelectionTwo }}</span>
      <span class="tag" v-show="item.additionalServices">{{ item.additionalServices }}</span>
    </view>

    <view class="job-card__foot">
      <view class="author">
        期望时间：{{ item.expectedDeliveryTime }}
      </view>
      <view class="job-card__loc"><view class="look-btn">查看详情</view></view>
    </view>
  </view>

</template>

<style scoped lang="scss">
// 颜色与尺寸
$brand: #1685ff;
$brand2: #38e0ff;
$brand3: #324cf0;
$brand4: #912fff;
$green: #2ecc71;
$text: #1f2329;
$sub: #6b7280;
$border: #eef2f7;
$bg: #fff;

.job-card {
  // 渐变描边 + 柔和底色
  position: relative;
  padding: 14px;
  margin-left: 15px;
  width: calc(100vw - 30px);
  border-radius: 12px;
  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.1);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-top: 20px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31,35,41,.1);
  }

  &__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  &__title {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 700;
    color: $text;
    line-height: 1.35;

    .badge {
      margin-left: 6px;
    }
  }

  &__salary {
    flex: 0 0 auto;
    font-weight: 700;
    color: $text;
    font-size: 16px;
    white-space: nowrap;
  }

  &__meta {
    width: 95%;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: $sub;
    white-space: nowrap;       /* 不换行 */
    overflow: hidden;          /* 超出隐藏 */
    text-overflow: ellipsis;   /* 超出部分用 ... 表示 */
  }

  &__tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .tag {
      font-size: 12px;
      color: #4b5563;
      padding: 6px 10px;
      border-radius: 8px;
      background: #f5f5f5;
      border: 1px solid $border;
      line-height: 1;
    }
  }

  &__foot {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    .author {
      display: flex;
      align-items: center;
      gap: 8px;

      &__avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid $border;
      }

      &__info {
        line-height: 1.1;
      }

      &__name {
        font-size: 13px;
        color: $text;
        font-weight: 600;
      }

      &__role {
        font-size: 12px;
        color: $sub;
      }
    }
  }

  &__loc {
    font-size: 12px;
    color: $sub;
    white-space: nowrap;
  }
}

/* 小徽标 */
.badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 6px;
  line-height: 1.2;
  color: #5b6577;
  background: #f2f4f7;
  border: 1px solid #e5e7eb;

  &--hot {
    color: #fff;
    background: #ff5a57;
    border-color: #ff5a57;
  }
}

/* 响应式微调 */
@media (max-width: 420px) {
  .job-card {
    padding: 12px;

    &__salary { font-size: 15px; }
    &__title  { font-size: 15px; }
  }
}

</style>